{% extends 'layout/base.twig' %}
{% import 'macros/helpers.twig' as helpers %}

{% block title %}
- Profile - {{ result.meta.url }}
{% endblock %}

{% block content %}
<div class="row-fluid">
<div class="span3">
    <div class="sidebar-nav" style="height:840px;overflow: auto;">
        <ul class="nav nav-list">
            <li class="nav-header">这次运行</li>
            <li><strong>请求地址</strong> <a href="{{ url('url.view', {'url': result.meta('url')|simple_url }) }}">{{ result.meta('url') }}</a></li>
            <li><strong>时间</strong> {{ result.date|date(date_format) }}</li>
            <li><strong>ID</strong> <a href="{{ url('custom.help', {id: result.id|trim }) }}">{{ result.id }}</a></li>
            <li><strong>执行时间</strong> {{ result.get('main()', 'wt')|as_time }}</li>
            <li><strong>CPU时间</strong> {{ result.get('main()', 'cpu')|as_time }}</li>
            <li><strong>内存占用</strong> {{ result.get('main()', 'mu')|as_bytes }}</li>
            <li><strong>内存使用峰值</strong> {{ result.get('main()', 'pmu')|as_bytes }}</li>

            <li class="nav-header">GET</li>
            <li>{{ helpers.property_list('GET', result.meta('get')) }}</li>

            <li class="nav-header">SERVER</li>
            <li>{{ helpers.property_list('SERVER', result.meta('SERVER')) }}

            <li class="nav-header">Waterfall</li>
            <li><strong>By IP</strong> <a href="{{ url('waterfall.list', {'remote_addr': result.meta.SERVER.REMOTE_ADDR, 'request_start': result.meta.SERVER.REQUEST_TIME - 5, 'request_end': result.meta.SERVER.REQUEST_TIME + 15}) }}">{{ result.meta.SERVER.REMOTE_ADDR }}</a></li>

        </ul>
    </div>
</div>

<div class="span9">

    <div class="row-fluid">
        <a href="{{ url('run.compare', {base: result.id|trim }) }}" id="compare-button" class="btn back-link">
            对比这次运行
        </a>
        <a href="{{ url('run.flamegraph', {id: result.id|trim }) }}" class="btn back-link">
            查看火焰图
        </a>
        <a href="{{ url('run.callgraph', {id: result.id|trim }) }}" class="btn back-link">
            查看调用图
        </a>
        <a href="#functions" class="btn back-link">
            跳转到函数
        </a>

        <h3>监控的函数</h3>

        <table class="table table-hover">
        <thead>
            <tr>
                <th>函数</th>
                <th class="right">调用次数</th>
                <th class="right"><span class="tip" title="自身执行时间">自身执行时间</span></th>
                <th class="right"><span class="tip" title="自身内存占用">自身内存占用</span></th>
                <th class="right"><span class="tip" title="自身内存峰值">自身内存峰值</span></th>
            </tr>
        </thead>
        <tbody>
        {% for value in watches %}
        <tr>
            <td>
            {{ helpers.tip_link(
                value.function,
                65,
                'run.symbol',
                {'id': result.id|trim, 'symbol': value.function}
            ) }}
            </td>
            <td class="right">{{ value.ct }}</td>
            <td class="right">{{ value.ewt|as_time }}</td>
            <td class="right">{{ value.emu|as_bytes }}</td>
            <td class="right">{{ value.epmu|as_bytes }}</td>
        </tr>
        {% else %}
        <tr><td colspan="4">
            你没有设置观察函数
            <a href="{{ url('watch.list') }}">现在去添加一个观察函数</a>.
        </td></tr>
        {% endfor %}
        </tbody>
        </table>

        <h3>SQL执行详情</h3>
        <table class="table table-hover">
        <thead>
            <tr>
                <th>执行时间</th>
                <th>执行SQL</th>
            </tr>
        </thead>
        <tbody>
        {% for value in sql %}
        <tr>
            <td>{{ value.time|as_time }}</td>
            <td>{{ value.sql }}</td>
        </tr>
        {% else %}
        <tr><td colspan="4">
            没有SQL调用
        </td></tr>
        {% endfor %}
        </tbody>
        </table>
    </div>

    <div class="row-fluid">
        <div class="span6">
          <h3>执行耗时图</h3>
          <div id="wall-time-chart" class="chart-container"></div>
          <dl>
          {% for value in wall_time %}
              <dt class="text-wrap">{{ value.name }}</dt>
              <dd>{{ value.value }} ms</dd>
          {% endfor %}
          </dl>
        </div>

        <div class="span6">
          <h3>内存消耗图</h3>
          <div id="memory-usage-chart" class="chart-container"></div>
          <dl>
          {% for value in memory %}
              <dt class="text-wrap">{{ value.name }}</dt>
              <dd>{{ value.value }} KB</dd>
          {% endfor %}
          </dl>
        </div>
    </div>
  </div><!--/row-->
</div>

<div class="row-fluid">
  <div class="pull-right form-search">
      <input type="search" id="function-filter" placeholder="根据函数名称过滤" />
  </div>
</div>

<div class="row-fluid">
  <a name="functions"></a>
  <table class="table table-hover table-sort" id="function-calls">
    <thead>
        <tr>
            <th>函数</th>
            <th>调用次数</th>
            <th>执行时间</th>
            <th>CPU时间</th>
            <th>内存占用</th>
            <th>内存峰值</th>
            <th>总执行时间</th>
            <th>总CPU时间</th>
            <th>总内存占用</th>
            <th>总内存峰值</th>
        </tr>
    </thead>
    <tbody>
    {% for key, value in profile %}
    <tr>
        <td class="text">
            {{ helpers.tip_link(
                key,
                65,
                'run.symbol',
                {'id': result.id|trim, 'symbol': key}
            ) }}
        </td>
        <td class="center">{{ value.ct }}</td>
        <td class="center">{{ value.ewt|as_time }}</td>
        <td class="center">{{ value.ecpu|as_time }}</td>
        <td class="center">{{ value.emu|as_kbytes }}</td>
        <td class="center">{{ value.epmu|as_kbytes }}</td>
        <td class="center">{{ value.wt|as_time }}</td>
        <td class="center">{{ value.cpu|as_time }}</td>
        <td class="center">{{ value.mu|as_kbytes }}</td>
        <td class="center">{{ value.pmu|as_kbytes }}</td>
    </tr>
    {% endfor %}
    </tbody>
</table>
</div><!--/row-->
{% endblock %}

{% block jsfoot %}
<script>
$(document).ready(function () {
    var wallTime = {{ wall_time|json_encode|raw }};
    Xhgui.columnchart('#wall-time-chart', wallTime, {
        width: 350,
        height: 300,
        postfix: ' ms'
    });
    var memoryData = {{ memory|json_encode|raw }};
    Xhgui.columnchart('#memory-usage-chart', memoryData, {
        width: 350,
        height: 300,
        postfix: ' KB'
    });

    var rows = $('#function-calls tbody tr');
    $('#function-filter').on('keyup', function(e) {
        var value = $(this).val();
        rows.each(function (i, el) {
            var row = $(el);
            var name = row.find('.text a').text();
            if (name.indexOf(value) === -1) {
                row.hide();
            } else {
                row.show();
            }
        });
    });
});
</script>
{% endblock %}
